<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/commons/global.jsp" %>
<!DOCTYPE html>
<html>
<head>
    <%@ include file="/commons/basejs.jsp" %>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>用户储值卡管理</title>
    <script src="../../../static/easyui/plugins/datagrid.show.js" type="text/javascript"></script>
</head>
<body>
    <div class="easyui-layout" fit="true" >
        <!--west用户储值卡start-->
        <div data-options="region:'west',split:true,border:false" title="用户体检卡" style="width:35%;">
            <table id="userCard_datagrid" class="easyui-datagrid"
                   data-options="
		   		url:'${path}/usercard/userCarddg.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#card_tools',
		   		pagination:true,
		   		singleSelect:true,
		   		onClickRow:function(index, row){
		   			rowchange(row.code);
		   		}">
                <thead>
                <th data-options="field:'id'">ID</th>
                <th data-options="field:'username',width:100">用户名</th>
                <th data-options="field:'code',width:100">卡号</th>
                <th data-options="field:'pwd',width:50">密码</th>
                <th data-options="field:'val',width:50">余额</th>
                <th data-options="field:'update_time',width:60,formatter:formatDateBoxFull">更新时间</th>
                <th data-options="field:'status',width:30,formatter:
            function(value){if(value==0) return '停用';return '可用';}">状态</th>
                </thead>
            </table>
            <div id="card_tools">
                <label>用户名:</label>
                <input class="easyui-searchbox" data-options="prompt:'请输入用户名',searcher:searchName" style="width:220px;"/>
                <label>卡号:</label>
                <input class="easyui-searchbox" data-options="prompt:'请输入卡号',searcher:searchCode" style="width:220px;"/>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="$('#userCard_datagrid').datagrid('reload')">刷新</a>
            </div>
        </div>
        <script type="text/javascript">
                //联动处理
                function rowchange(id) {
                    var queryParams = {};
                    queryParams.code = id;
                    //重新加载体检卡明细列表
                    var options = $("#Carddetail_datagrid").datagrid('getPager').data("pagination").options;
                    options.pageNumber = 1;
                    $("#Carddetail_datagrid").datagrid('options').queryParams = queryParams;
                    $("#Carddetail_datagrid").datagrid('reload');
                }
                //搜索用户名
                function searchName(val){
                    var queryParams = {};
                    queryParams.username = val;
                    //重新加载体检卡明细列表
                    var options = $("#userCard_datagrid").datagrid('getPager').data("pagination").options;
                    options.pageNumber = 1;
                    $("#userCard_datagrid").datagrid('options').queryParams = queryParams;
                    $("#userCard_datagrid").datagrid('reload');
                }
                //搜索卡号
                function searchCode(val){
                    var queryParams = {};
                    queryParams.code = val;
                    //重新加载体检卡明细列表
                    var options = $("#userCard_datagrid").datagrid('getPager').data("pagination").options;
                    options.pageNumber = 1;
                    $("#userCard_datagrid").datagrid('options').queryParams = queryParams;
                    $("#userCard_datagrid").datagrid('reload');
                }
        </script>
        <!--center用户储值卡明细start-->
        <div data-options="region:'center',split:true,border:false" title="体检卡明细" style="width:65%;">
            <table id="Carddetail_datagrid" class="easyui-datagrid"
                   data-options="
		   		url:'${path}/usercard/cardDetaildg.do',
		   		fit:true,
		   		rownumbers:true,
		   		fitColumns: true,
		   		toolbar:'#datail_tools',
		   		pagination:true,
		   		singleSelect:true">
                <thead>
                <th data-options="field:'id'">ID</th>
                <th data-options="field:'code',width:100">消费卡号</th>
                <th data-options="field:'pre_val',width:50">消费前余额</th>
                <th data-options="field:'val',width:50">金额</th>
                <th data-options="field:'aft_val',width:50">消费后余额</th>
                <th data-options="field:'seller_name',width:70">交易机构</th>
                <th data-options="field:'product_name',width:70">交易商品</th>
                <th data-options="field:'status',width:30,formatter:
            function(value){if(value==1) return '充值';return '消费';}">消费类型</th>
                <th data-options="field:'create_time',width:60,formatter:formatDateBoxFull">时间</th>
                </thead>
            </table>
            <div id="datail_tools">
                <div id="date" style="display: inline">开始时间:<input id="begin"  class="Wdate"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" />
                    结束时间:<input id="end"  class="Wdate"  onfocus="WdatePicker({dateFmt:'yyyy-MM-dd HH:mm:ss'})" /></div>
                <div id="separator" class="datagrid-btn-separator"></div>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" onclick="selectDetail()">查询</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-reload'" onclick="refcardDetail()">刷新</a>
            </div>
        </div>
        <script type="text/javascript">
           //储值卡明细搜索
            function selectDetail() {
                var begin = $("#begin").val();
                var end = $("#end").val();
                var queryParams = {};
                var cardrow = $('#userCard_datagrid').datagrid('getSelected');
                if(cardrow){
                    queryParams.code = cardrow.code;
                }
                queryParams.begin = begin;
                queryParams.end = end;
                var options = $("#Carddetail_datagrid").datagrid('getPager').data("pagination").options;
                options.pageNumber = 1;
                $("#Carddetail_datagrid").datagrid('options').queryParams = queryParams;
                $("#Carddetail_datagrid").datagrid('reload');
            }
            //清空条件刷新
            function refcardDetail(){
                $("#date input").val("");
                var queryParams = {};
                $("#Carddetail_datagrid").datagrid('options').queryParams = queryParams;
                $("#Carddetail_datagrid").datagrid('reload');
            }
        </script>
    </div>
</body>
</html>
